<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>房源展示页</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css"
	href="css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="css/housestyle.css">

<script
	src="js/public/jquery-1.8.3.min.js"></script>
<script
	src="js/public/jqPaginator.js"></script>
	
<link rel="stylesheet" type="text/css" href="css/showHouse.css"/>
<script
	src="js/private/map.js"></script>

	<style type="text/css">
        html{height:100%}
        body{margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
   
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
</head>
<script type="text/javascript">
	
	var json = {
		"pageNow" : 1,
		"conditionQuery" : {
			"h_cooking" : 0,
			"h_hot" : 0,
			"h_bathroom" : 0,
			"h_houseType" : null,
			"h_houseStyle" : null//公寓等	
		}
	};
	
	function getHouseByPage(json, currPage) {	
		json.pageNow = currPage;
		var count = 0;
		$.ajax({
			url : "${pageContext.request.contextPath }/getHouseByPage.action",
			type : "post",
			async : true,
			contentType : "application/json;charset=utf-8",
			data : JSON.stringify(json),
			success : function(data) {
				$.jqPaginator('#pagination2', {			
					totalCounts : data.totalCount,
					totalPages : data.totalPageCount==0?1:data.totalPageCount,
					visiblePages : 5,
					currentPage : data.pageNow,		
					first : '<li class="first"><a href="javascript:void(0);">首页</a></li>',
					prev : '<li class="prev"><a href="javascript:;">前一页</a></li>',
					next : '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
					last : '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
					page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
					onPageChange : function(num, type) {
						$('#currentPage').text("第" + num + "页");
						count++;
						 if (count != 1) {
							getHouseByPage(json, num);
						} 
					}
				});
				/* 房源信息 */
				
				var item = data.listT;/* 获取房子列表 */
				var num = item.length;
				if(num<3){
					for(var i=num;i<=3;i++){/* 不足四个时隐藏 */
						$(".house-image:eq("+i+")").css("display","none");
					}
				}else{
					for(var i=0;i<=3;i++){/* 足够就都显示 */
						$(".house-image:eq("+i+")").css("display","block");
					}
				}
				for(var i=0;i<item.length;i++){/* 遍历取数据 */
					$(".house_name:eq("+i+")").html(data.listT[i].h_name);
					$(".house_cooking:eq("+i+")").html(data.listT[i].h_cooking==1?"可做饭":"");
					$(".h_houseType:eq("+i+")").html(data.listT[i].h_houseType);
					$(".house_price:eq("+i+")").html("￥"+data.listT[i].h_price);
					
				}
				
				
				/* 房源信息 */
				$('#totalPage').text("共" + data.totalPageCount + "页");
			}
		});
	};
	
	$(function() {
			/*对第一行的条件进行筛选*/
			$("#select1 dd").click(function() {
				if ($(this).hasClass("select-all")) {//如果选择全部选项
					$(".select-result dd").remove(".selectA");//清除掉筛选条件，后面重新加入
					for (var index = 1; index < $("#select1 dd").length; index++) {
						var all = $("#select1 dd:eq(" + index + ")");
					 	$(".select-result dl").append(all.clone().addClass("selectA"));//重新加入所有的筛选条件
					}
					$("#select1 dd:gt(0)").addClass("selected");//将索引号大于0的条件全部选中
				} else { //如果没有选择全部选项
					/*首先判断该选项是否已经被选择*/
					if (!$(this).hasClass("selected")) { //如果没有被选择
						$(this).addClass("selected");//就添加选择效果
						$("#select1 dd:first").removeClass("selected");//将全部按钮移除选择效果，用不着了。。
						var copyThisA = $(this).clone();
						$(".select-result dl").append(copyThisA.addClass("selectA"));//在筛选框中添加此选项
					} else {
						var temp = $(this).attr("data-id"); //如果已被选择
						$(".select-result dd[data-id=" + temp + "]").remove();//移除筛选框中的此选项
						$(this).removeClass("selected");//此选项移除选择效果
					}
				}
			});
			/*如果选择清空按钮*/
			$("#select1>a").click(function() {
				$("#select1 dd").removeClass("selected");//移除所有条件的已被选择效果
				$(".select-result dd").remove(".selectA");//移除筛选框中的所有选项
				if ($(".select-result dd").length == 1) {//...
					$(".select-result dd:eq(0)").css("display", "block");
				}
			});
	
			$("#select2 dd").click(function() {
				if (!$(this).hasClass("selected")) {
					$(this).addClass("selected").siblings().removeClass("selected");
					if ($("#selectB").length > 0) {
						$("#selectB a").html($(this).children().html());
					} else {
						var copyThisB = $(this).clone();
						$(".select-result dl").append(copyThisB.attr("id", "selectB"));
					}
				} else {
					var temp = $(this).attr("data-id");
					$(".select-result dd[data-id=" + temp + "]").remove();
					$(this).removeClass("selected");
				}
			});
	
			$("#select2>a").click(function() {
				$("#select2 dd").removeClass("selected");
				$(".select-result dd").remove("#selectB");
				if ($(".select-result dd").length == 1) {
					$(".select-result dd:eq(0)").css("display", "block");
				}
			});
	
			$("#select3 dd").click(function() {
				if (!$(this).hasClass("selected")) {
					$(this).addClass("selected").siblings().removeClass("selected");
					var copyThisC = $(this).clone();
					if ($("#selectC").length > 0) {
						$("#selectC a").html($(this).children().html());
					} else {
						$(".select-result dl").append(copyThisC.attr("id", "selectC"));
					}
				} else {
					var temp = $(this).attr("data-id");
					$(".select-result dd[data-id=" + temp + "]").remove();
					$(this).removeClass("selected");
				}
			});
	
			$("#select3>a").click(function() {
				$("#select3 dd").removeClass("selected");
				$(".select-result dd").remove("#selectC");
				if ($(".select-result dd").length == 1) {
					$(".select-result dd:eq(0)").css("display", "block");
				}
			});
	
			$("#select4 dd").click(function() {
				if (!$(this).hasClass("selected")) {
					$(this).addClass("selected").siblings().removeClass("selected");
					var copyThisD = $(this).clone();
					if ($("#selectD").length > 0) {
						$("#selectD a").html($(this).children().html());
					} else {
						$(".select-result dl").append(copyThisD.attr("id", "selectD"));
					}
				} else {
					var temp = $(this).attr("data-id");
					$(".select-result dd[data-id=" + temp + "]").remove();
					$(this).removeClass("selected");
				}
			});
	
			$("#select4>a").click(function() {
				$("#select4 dd").removeClass("selected");
				$(".select-result dd").remove("#selectD");
				if ($(".select-result dd").length == 1) {
					$(".select-result dd:eq(0)").css("display", "block");
				}
			});
			
			//选择筛选框中的该元素
			$(".selectA").live("click", function() {
				var temp = $(this).attr("data-id");
				$("#select1 dd[data-id=" + temp + "]").removeClass("selected");//筛选条件中的该选项移除选择效果
				$(this).remove();//移除筛选框中的该元素
			});
	
			$("#selectB").live("click", function() {
				var temp = $(this).attr("data-id");
				$("#select2 dd[data-id=" + temp + "]").removeClass("selected");
				$(this).remove();
			});
	
			$("#selectC").live("click", function() {
				var temp = $(this).attr("data-id");
				$("#select3 dd[data-id=" + temp + "]").removeClass("selected");
				$(this).remove();
			});
	
			$("#selectD").live("click", function() {
				var temp = $(this).attr("data-id");
				$("#selectD dd[data-id=" + temp + "]").removeClass("selected");
				$(this).remove();
			});
	
			$(".select dd").live("click", function() {
				if ($(".select-result dd").length > 1) {
					$(".select-no").hide();
				} else {
					$(".select-no").show();
				}
			});
		});
		
		/*查询条件一更改就重构json串*/
		 function changeCondition(json){
			var tempA1 = $(".selectA[data-id='1'] a").html();
			var tempA2 = $(".selectA[data-id='2'] a").html();
			var tempA5 = $(".selectA[data-id='5'] a").html();
			var tempB = $("#selectB a").html();
			var tempC = $("#selectC a").html();
			json.conditionQuery.h_cooking = tempA1==undefined?0:1;
			json.conditionQuery.h_hot = tempA2==undefined?0:1;
			json.conditionQuery.h_bathroom = tempA5==undefined?0:1;
			json.conditionQuery.h_houseType = tempB==undefined?null:tempB;
			json.conditionQuery.h_houseStyle = tempC==undefined?null:tempC;
			console.log(json);
		}
		
		$(function() {
			$(".select dd").click(function() {
				changeCondition(json);
				
				getHouseByPage(json,1);//重新发送异步请求
			});
			$("#select1>a").click(function() {
				json.conditionQuery.h_cooking = 0;
				json.conditionQuery.h_hot = 0;
				json.conditionQuery.h_bathroom = 0;
				console.log(json);
				getHouseByPage(json,1);
			});
			$("#select2>a").click(function() {
				json.conditionQuery.h_houseType = null;
				console.log(json);
				getHouseByPage(json,1);
			});
			$("#select3>a").click(function() {
				json.conditionQuery.h_houseStyle = null;
				console.log(json);
				getHouseByPage(json,1);
			});
			$(".select-result dd[class*='selected']").live("click",function() {
				changeCondition(json);
				
				getHouseByPage(json,1);
			});
		}); 
</script>

<body onload="getHouseByPage(json,1)">
<!--标题外框-->
<div class="heder relave">
    <div class="logo_heder"><img src=""></div>


    <div class="heder_left">
        <ul class="nva_R asote nav_right">
            <div class="room_btn"><a href="">免费发布房源</a></div>
            <li class="room_li"><a>登录/注册</a></li>
            <div class="room_div"><a>APP立减</a></div>
            <li class="room_li"><a>商旅合作</a></li>
        </ul>

    </div>

</div>
<!--标题外框-->
<!--右边筛选外框-->
<div class="clearfloat_left">
    <div class="time_nav">
        <div class="clearfloat">
        <dd class="aim clearfloat_dd" >目的地<input id="search_city" class="search_input"></dd>
        <dd class="access_time clearfloat_dd">日期<input id="search_date" class="search_input"></dd>
        <dd class="people_num clearfloat_dd">人数<input id="search_num" class="search_input"></dd>
        <dd class="keyword clearfloat_dd">关键词<input id="search_keyword" class="search_input"></dd>
            <dd id="landmarkBtn">搜索</dd>
        </div>
    </div>


<!-- sha -->
	<div id="main">
		<div class="demo">
			<ul class="select">
				<li class="select-list">
					<dl id="select1">
						<dt>推荐：</dt>
						<dd class="select-all">
							<a>全部</a>
						</dd>
						<dd data-id="1">
							<a>可做饭</a>
						</dd>
						<dd data-id="2">
							<a>是否热门</a>
						</dd>
						<dd data-id="5">
							<a>有独卫</a>
						</dd>
						<a>清空</a>
					</dl>
				</li>
				<li class="select-list">
					<dl id="select2">
						<dt>户型：</dt>
						<dd data-id="11">
							<a>一居</a>
						</dd>
						<dd data-id="12">
							<a>二居</a>
						</dd>
						<dd data-id="13">
							<a>三居</a>
						</dd>
						<dd data-id="14">
							<a>四居及以上</a>
						</dd>
						<a>清空</a>
					</dl>
				</li>
				<li class="select-list">
					<dl id="select3">
						<dt>房型：</dt>
						<dd data-id="15">
							<a>公寓</a>
						</dd>
						<dd data-id="16">
							<a>别墅</a>
						</dd>
						<dd data-id="17">
							<a>套一</a>
						</dd>
						<dd data-id="18">
							<a>套二</a>
						</dd>
						<dd data-id="19">
							<a>套三</a>
						</dd>
						<a>清空</a>
					</dl>
				</li>
				<li class="select-list">
					<dl id="select4">
						<dt>价格：</dt>
						<dd data-id="21">
							<a>100~300</a>
						</dd>
						<dd data-id="22">
							<a>300~500</a>
						</dd>
						<dd data-id="23">
							<a>500~1000</a>
						</dd>
						<dd data-id="24">
							<a>1000以上</a>
						</dd>
						<a>清空</a>
					</dl>
				</li>
				<div>
					<li class="select-result">
						<dl>
							<dt>已选条件：</dt>
							<dd class="select-no">暂时没有选择过滤条件</dd>
						</dl>
					</li>
				</div>
			</ul>
		</div>
		
		</div>
		<!--右边筛选外框-->
		
<!--房屋列表框-->
    <div id="path" class="path">
        <div class="path_left">
            <span><a style="color: #34e612" onclick="" href="">首页 &nbsp;></a></span>
            <span style="color: #34e612" >成都 &nbsp;短租房</span>
        </div>


        <div class="path_right">

            <span><a onclick="" href="">预定数&nbsp;↑↓</a></span>
            <span><a onclick="" href="">评论数&nbsp;↑↓</a></span>
            <span><a onclick="" href="">价格&nbsp;↑↓</a></span>
            <span><a style="color: #34e612" onclick="" href="">推荐排序</a></span>
        </div>

        <div class="clearfloat fybox">		
		<div id="main_content">
		
		
		
		<!-- 房子0 -->
            <div class="house-image">

                <a >
                    <div class="room-img">
                        <div class="compare" onclick="showCompare()">
                            <span>对比</span>
                        </div>
						<div class="house_price"></div>
                        <img alt="房屋" src="">
                    </div>
                </a>
                <div class="list">
                    <a><p class="house_name"></p></a>
                    <ul>
                        <a ><li class="house_rate">5.0分 · </li></a>
                        <a ><li class=""></li></a>
                        <a ><li class="h_houseType"></li></a>
                        <a ><li> </li></a>
                    </ul>
                    <p class="room-intro">
                        <a ><span class="room-intro-blue">长租优惠</span></a>
                        <a ><span class="room-intro-blue">实拍</span></a>
                        <a ><span class='house_cooking' class="room-intro-blue"></span></a>
                    </p>
                </div>
            </div>
            <!-- 房子0 -->
            <!-- 房子1 -->
            <div class="house-image">

                <a >
                    <div class="room-img">
                        <div class="compare" onclick="showCompare()">
                            <span>对比</span>
                        </div>
						<div class="house_price"></div>
                        <img alt="房屋" src="">
                    </div>
                </a>
                <div class="list">
                    <a><p class="house_name"></p></a>
                    <ul>
                        <a ><li class="house_rate">5.0分 · </li></a>
                        <a ><li class=""></li></a>
                        <a ><li class="h_houseType"></li></a>
                        <a ><li> </li></a>
                    </ul>
                    <p class="room-intro">
                        <a ><span class="room-intro-blue">长租优惠</span></a>
                        <a ><span class="room-intro-blue">实拍</span></a>
                        <a ><span class='house_cooking' class="room-intro-blue"></span></a>
                    </p>
                </div>
            </div>
            <!-- 房子1 -->
            <!-- 房子2 -->
            <div class="house-image">

                <a >
                    <div class="room-img">
                        <div class="compare" onclick="showCompare()">
                            <span>对比</span>
                        </div>
						<div class="house_price"></div>
                        <img alt="房屋" src="">
                    </div>
                </a>
                <div class="list">
                    <a><p class="house_name"></p></a>
                    <ul>
                        <a ><li class="house_rate">5.0分 · </li></a>
                        <a ><li class=""></li></a>
                        <a ><li class="h_houseType"></li></a>
                        <a ><li></li></a>
                    </ul>
                    <p class="room-intro">
                        <a ><span class="room-intro-blue">长租优惠</span></a>
                        <a ><span class="room-intro-blue">实拍</span></a>
                        <a ><span class='house_cooking' class="room-intro-blue"></span></a>
                    </p>
                </div>
            </div>
            <!-- 房子2 -->
            <!-- 房子3 -->
            <div class="house-image">

                <a >
                    <div class="room-img">
                        <div class="compare" onclick="showCompare()">
                            <span>对比</span>
                        </div>
						<div class="house_price"></div>
                        <img alt="房屋" src="">
                    </div>
                </a>
                <div class="list">
                    <a><p class="house_name"></p></a>
                    <ul>
                        <a ><li class="house_rate">5.0分 · </li></a>
                        <a ><li class=""></li></a>
                        <a ><li class="h_houseType"></li></a>
                        <a ><li> </li></a>
                    </ul>
                    <p class="room-intro">
                        <a ><span class="room-intro-blue">长租优惠</span></a>
                        <a ><span class="room-intro-blue">实拍</span></a>
                        <a ><span class='house_cooking' class="room-intro-blue"></span></a>
                    </p>
                </div>
            </div>
            <!-- 房子3-->
		
		<!-- 共几页 -->
		<div class="container_outer">
			<div class="container">
				<span id="currentPage"></span> <span id="totalPage"></span>
				<div class="row" style="min-height:500px;padding:0;">
					<ul class="pagination" id="pagination2"></ul>
				</div>
			</div>
		</div>
		
		<!-- 共几页 -->
		</div>
		
	</div>
	
</div>
</div>
	
<!--左边地图外框-->
<div class="clearfloat_right">


    <input type="text" id="cityName" value="成都"/>
    <input type="button" onclick="setCity()" value="查找" />
    <div id="container" style="width:1024px;height:600px;"></div>


    <script type="text/javascript">
 
    	
        
    </script>


    <script>

        /*显示要比较的房*/
        function showCompare() {
            $(".make_compare").css('display','block');
        }

        /*清除要比较的房*/
        function hideCompare() {
            $(".make_compare").css('display','none');
            $(".compare").css('background-color', 'white');
        }

        $(document).ready(function(){
            $(".compare").click("click", function () {
                $(this).css('background-color', 'orange');
            })
        });

    </script>
</div>

<!--对比框-->
<div class="make_compare">
    <div class="make_close" onclick="hideCompare()">×</div>
    <div class="make_content"><img src=""></div>
    <div class="make_content"><img src=""></div>
    <div class="make_btn">对比</div>

</div>


<script>

        /*显示要比较的房*/
        function showCompare() {
            $(".make_compare").css('display','block');
        }

        /*清除要比较的房*/
        function hideCompare() {
            $(".make_compare").css('display','none');
            $(".compare").css('background-color', 'white');
        }

        $(document).ready(function(){
            $(".compare").click("click", function () {
                $(this).css('background-color', 'orange');
            })
        });
/* 地图代码 */
var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;

        var point = new BMap.Point(104.072241,30.663487);    //创建点坐标
        map.centerAndZoom(point, 14);                //初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();                //激活滚轮调整大小功能
        map.addControl(new BMap.NavigationControl());    //添加控件：缩放地图的控件，默认在左上角；
        map.addControl(new BMap.MapTypeControl());        //添加控件：地图类型控件，默认在右上方；
        map.addControl(new BMap.ScaleControl());        //添加控件：地图显示比例的控件，默认在左下方；
        map.addControl(new BMap.OverviewMapControl());  //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl

        var search = new BMap.LocalSearch("中国", {
            onSearchComplete: function(result){
                if (search.getStatus() == BMAP_STATUS_SUCCESS){
                    var res = result.getPoi(0);
                    var point = res.point;
                    map.centerAndZoom(point, 11);
                }
            },renderOptions: {  //结果呈现设置，
                map: map,
                autoViewport: true,
                selectFirstResult: true
            } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。
                // alert(html.innerHTML)
            }//这一段可以不要，只不过是为学习更深层次应用而加入的。
        });

        function setCity(){
            search.search(document.getElementById("cityName").value);
        }

        search.search(document.getElementById("cityName").value);
	
    </script>
     
<!--对比框-->

<!--左边地图外框-->	
	
	
</body>
</html>
